<template>
  <header>
    <div class="title">
      <img :class="type_en" :src="'img/'+type_en+'.png'" />
      <span :class="type_en">{{ type_ch }}</span>
    </div>
    <ul class="option">
      <li
        v-for="(option, index) in optionList"
        :key="option.name"
        :class="option.isActive?'active':''"
        @click="changeOption(index)"
      >
        <span>{{ option.name }}</span>
      </li>
    </ul>
  </header>
</template>

<script>
export default {
  name: "listHeader",
  data() {
    return {
      type_ch: "视频",
      type_en: "video"
    };
  },
  props: {
    optionList: {
      type: Array,
      default: []
    },
    type: {
      //1视频 2音频
      type: Number,
      default: 1
    }
  },
  created() {
    this.type_ch = this.type == 1 ? "视频" : "音乐";
    this.type_en = this.type == 1 ? "video" : "music";
  },
  methods: {
    changeOption(index) {
      this.optionList.forEach((op, i) => {
        if (i === index) op.isActive = true;
        else op.isActive = false;
      });
    }
  }
};
</script>

<style lang="less" scoped>
header {
  width: 60%;
  height: 30px;
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  align-items: center;

  .title {
    margin-right: auto;

    img {
      padding: 3px 15px 0 0;
      transform-origin: 25% 75%;
    }

    span {
      float: right;
      cursor: pointer;
      transform: scale(1);
    }

    &:hover > span.video {
      color: #e74c3c;
      animation-name: ani-title-text-video;
      animation-duration: 300ms;
      animation-iteration-count: 2;
      animation-timing-function: linear;
      animation-direction: alternate;
    }

    &:hover > img.video {
      animation-name: ani-title-icon-video;
      animation-delay: 300ms;
      animation-duration: 500ms;
      animation-timing-function: linear;
    }

    &:hover > span.music {
      color: #e74c3c;
      animation-name: ani-title-text-music;
      animation-duration: 300ms;
      animation-iteration-count: 2;
      animation-timing-function: ease-out;
      animation-direction: alternate;
    }

    &:hover > img.music {
      animation-name: ani-title-icon-music;
      animation-delay: 300ms;
      animation-duration: 500ms;
      animation-timing-function: ease-in-out;
      animation-direction: alternate;
      animation-iteration-count: 2;
    }
  }

  ul.option {
    display: flex;
    flex-direction: row;
    width: 200px;
    justify-content: space-evenly;

    li {
      padding: 3px 10px;

      &:hover {
        cursor: pointer;
      }

      span {
        display: inline-block;
      }

      &:hover > span {
        animation-name: ani-option-hover;
        animation-duration: 500ms;
        animation-timing-function: linear;
        animation-direction: alternate;
        animation-fill-mode: both;
      }

      &.active {
        background-color: rgba(253, 76, 91, 0.1);
        color: #e74c3c;
      }
    }
  }
  /** 
  * 视频区title动画
  */
  @keyframes ani-title-text-video {
    from {
      transform: skewX(0deg);
    }
    to {
      transform: skewX(30deg) translateX(-15px);
    }
  }

  @keyframes ani-title-icon-video {
    from {
      transform: rotateZ(0deg);
    }
    to {
      transform: rotateZ(-360deg);
    }
  }
  /** 
  * 音乐区title动画
  */
  @keyframes ani-title-text-music {
    from {
      transform: translateX(0px);
    }
    to {
      transform: translateX(-16px);
    }
  }

  @keyframes ani-title-icon-music {
    from {
      transform: skewX(0) translateX(0px);
    }
    to {
      transform: skewX(10deg) translateX(-16px);
    }
  }

  /**
  * option区动画
  */
  @keyframes ani-option-hover {
    0% {
      transform: skewX(0deg) translateX(0);
    }
    25% {
      transform: skewX(10deg) translateX(-5px);
    }
    50% {
      transform: skewX(0deg) translateX(0);
    }
    75% {
      transform: skewX(-10deg) translateX(5px);
    }
    100% {
      transform: skewX(0deg) translateX(0);
    }
  }
}
</style>